<template>
	<view>
		<!-- 课程名称 -->
		<view class="box">
			<view class="box-title flex vertical-center fn-25 fn-w hairline--bottom">
				<image style="width: 35rpx;" class="mr-15" src="../../static/course/name.png" mode="widthFix"></image>
				课程名称
			</view>
			<view class="item flex">{{ course.c_name || "暂无课程名称" }}</view>
		</view>
		<!-- 课程详情 -->
		<view class="box">
			<view class="box-title flex vertical-center fn-25 fn-w hairline--bottom">
				<image style="width: 30rpx;" class="mr-15" src="../../static/course/xiangqing.png" mode="widthFix"></image>
				课程详情
			</view>
			<view class="item">
				{{ course.c_info || "课程详情" }}
			</view>
		</view>
		<!-- 名师简介 -->
		<view class="box">
			<view class="box-title flex vertical-center fn-25 fn-w hairline--bottom">
				<image style="width: 44rpx;" class="mr-5" src="../../static/course/laoshi.png" mode="widthFix"></image>
				名师简介
			</view>
			<view class="item flex vertical-top">
				<text class="flex-1">
					{{course.t_info }}
				</text>
				<view class="col-4 flex-column vertical-center fn-w">
					<image :src="course.t_img" style="width: 117rpx; height: 117rpx;border-radius: 50%;" mode=""></image>
					<text class="mt-20">名师</text>
					<text>{{ course.t_name }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			course: Object
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.box {
	background-color: $color-white;
	box-shadow: 3rpx 3rpx 10rpx rgba(#eee, 0.1);
	padding: 20rpx;
	border-radius: 5rpx;
	margin-bottom: 30rpx;
	&-title {
		padding-bottom: 20rpx;
	}
	.item {
		padding-top: 24rpx;
		padding-left: 40rpx;
		font-size: 22rpx;
		line-height: 28rpx;
	}
}
</style>
